import React, { PureComponent } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import {
  Form,
  Icon,
  Statistic, BackTop, Row, Col, Tooltip, Button,
} from 'antd';
import ReactEcharts from 'echarts-for-react';
import themeObj from './chalk.json';
import Wave from './wave'
import debounce from 'lodash/debounce';
import filter from 'lodash/filter';
import map from 'lodash/map';
import get from 'lodash/get';
import request from '@/utils/request';
import echarts from 'echarts';
import 'react-clock/dist/Clock.css';
import styles from './../Home/index.less';
import CountUp from 'react-countup';
import dashboard_top from './../../images/dashboard_top.png';
import dashboard_top2 from './../../images/dashboard_top2.png';
import location_shuichang from './../../images/location_shuichang.png';
import dunpai from './../../images/dunpai.png';
import baojing from './../../images/baojing.png';
import sun from './../../images/sun.png';
import sun_close from './../../images/sun_close.png';
import yewei from './../../images/yewei.png';
import yewei_error from './../../images/yewei_error.png';
import tulufanGeo from './../../assets/tulufanCustomGeo';
import working from '../../images/working.png';
import find from 'lodash/find';
import AreaMap from "@/components/AreaMap";
const FormItem = Form.Item;
echarts.registerTheme('my_theme', themeObj);


@connect(({ dashboard, homeData,RevenueHomeData,loading }) => ({
  dashboard,homeData,RevenueHomeData
}))
@Form.create()
class BasicList extends PureComponent {
  constructor(props) {
    super(props);
    // this.echarts = window.echarts;
    this.permissions = JSON.parse(sessionStorage.getItem('permissions'));
    this.myChart = [];
    this.state = {
      date: new Date(),
      clock_date: new Date(),
      showMore: true,
      autoplay: true,
      offsetWidth: 0,
      carouselH: 0,
      boxH2: 0,
      boxH: 0,
      editRecord: {},
      IsFull: this.IsFull(),
      time: moment().format('YYYY-MM-DD HH:mm:ss'),
      QQHData: [],
      QQHAllData: {},
      YYCData1: [],
      YYCAllData1: {},
      YYCData2: [],
      YYCAllData2: {},
      TELData0: [],
      TELAllData0: {},
      TELData1: [],
      TELAllData1: {},
      TELData2: [],
      TELAllData2: {},
      TELData3: [],
      TELAllData3: {},
      LCQData1: [],
      LCQAllData1: {},
      LCQData2: [],
      LCQAllData2: {},
      LCQData3: [],
      LCQAllData3: {},
      LCQData4: [],
      LCQAllData4: {},
      SFQData0: {},
      SFQAllData0: {},
      SFQData3: {},
      SFQAllData3: {},
      SFQData1: [],
      SFQAllData1: {},
      SFQData2: [],
      SFQAllData2: {},
    };
  }

  componentDidMount() {
    return
    const { dispatch } = this.props;
    const {
      dashboard: { pageLoaded, scrollData },
    } = this.props;
    console.log('pageLoaded', pageLoaded);
    console.log('scrollData', scrollData);
    const table = document.querySelector('.homePage');
    if (pageLoaded) {
      setTimeout(function() {
        console.log('table', table);
        table.scrollTop = scrollData.y;
        table.scrollLeft = scrollData.x;
      }, 0);
      // this.dynamic();
      // this.dynamic2()

    } else {
      const {} = this.props;
      // dispatch({
      //   type: `dashboard/changeLoaded`,
      // });

      dispatch({
        type: 'dashboard/fetch',
        payload: {},
        callback: () => {
          // this.dynamic()
          // this.dynamic2()
          const { dispatch } = this.props;
          dispatch({
            type: `dashboard/changeLoaded`,
          });
        },
      });
    }

    window.addEventListener('resize', this.resize);
    table.addEventListener('scroll', debounce(this.scroll, 150));

    const that=this
    this.changeCustomH();
    let company_id=sessionStorage.getItem('company_id');
    if(find(this.permissions, { name: 'homepage' })){
      that.fetchQQH();
      that.fetchYYC();
      that.fetchTEL();
      that.fetchLCQ();
      that.fetchSFQ();
      this.timer = setInterval(
        () => this.setState({ time: moment().format('YYYY-MM-DD HH:mm:ss') }),
        1000,
      );
      this.timer2 = setInterval(function() {
          dispatch({
            type: 'dashboard/fetch',
          });
          that.fetchQQH();
          that.fetchYYC();
          that.fetchTEL();
          that.fetchLCQ();
          that.fetchSFQ();
        },
        20000,
      );
    }


  }
  fetchQQH = (params) => {
    const that = this;
    request(`/workstations/246692813440962560`, {
      method: 'GET',
    }).then(response => {
      console.log('workstations ,data',response)
      if (response.status === 200) {
        that.setState({
          QQHData:response.data.data.workstation_data.modbus,
          QQHAllData:response.data.data
        });
      }
    });
  };
  fetchYYC = (params) => {
    const that = this;
    request(`/workstations/393065209482874880`, {
      method: 'GET',
    }).then(response => {
      console.log('fetchYYC ,data',response)
      if (response.status === 200) {
        that.setState({
          YYCData1:response.data.data.workstation_data.sensor,
          YYCData2:response.data.data.workstation_data.modbus,
          YYCAllData1:response.data.data
        });
      }
    });
  };
  fetchTEL = (params) => {
    const that = this;
    request(`/workstations/255651027674509312`, {
      method: 'GET',
    }).then(response => {
      if (response.status === 200) {
        that.setState({
          TELData0:response.data.data.workstation_data.modbus,
          TELAllData1:response.data.data
        });
      }
    });
    request(`/workstations/393143306949398528`, {
      method: 'GET',
    }).then(response => {
      if (response.status === 200) {
        that.setState({
          TELData1:response.data.data.workstation_data.modbus,
          TELAllData1:response.data.data
        });
      }
    });
    request(`/workstations/689783038373113856`, {
      method: 'GET',
    }).then(response => {
      if (response.status === 200) {
        that.setState({
          TELData2:response.data.data.workstation_data.rtu,
          TELAllData2:response.data.data
        });
      }
    });
    request(`/workstations/391694620184293376`, {
      method: 'GET',
    }).then(response => {
      if (response.status === 200) {
        that.setState({
          TELData3:response.data.data.workstation_data.sensor,
          TELAllData3:response.data.data
        });
      }
    });
  };
  fetchLCQ = (params) => {
    const that = this;
    request(`/workstations/389839506364440576`, {
      method: 'GET',
    }).then(response => {
      if (response.status === 200) {
        that.setState({
          LCQData1:response.data.data.workstation_data.sensor,
          LCQAllData1:response.data.data
        });
      }
    });
    request(`/workstations/390960445336592384`, {
      method: 'GET',
    }).then(response => {
      if (response.status === 200) {
        that.setState({
          LCQData2:response.data.data.workstation_data.sensor,
          LCQAllData2:response.data.data
        });
      }
    });
    request(`/workstations/711287217978892288`, {
      method: 'GET',
    }).then(response => {
      if (response.status === 200) {
        that.setState({
          LCQData3:response.data.data.workstation_data.rtu,
          LCQAllData3:response.data.data
        });
      }
    });
    request(`/workstations/712781258961330176`, {
      method: 'GET',
    }).then(response => {
      if (response.status === 200) {
        that.setState({
          LCQData4:response.data.data.workstation_data.rtu,
          LCQAllData4:response.data.data
        });
      }
    });
  };
  fetchSFQ = (params) => {
    const that = this;
    request(`/workstations/648626436744052736`, {
      method: 'GET',
    }).then(response => {
      if (response.status === 200) {
        that.setState({
          SFQData0:response.data.data.workstation_data.rtu,
          SFQAllData0:response.data.data
        });
      }
    });
    request(`/workstations/631922235028844544`, {
      method: 'GET',
    }).then(response => {
      if (response.status === 200) {
        that.setState({
          SFQData3:response.data.data.workstation_data.rtu,
          SFQAllData3:response.data.data
        });
      }
    });
    request(`/workstations/391551926178983936`, {
      method: 'GET',
    }).then(response => {
      if (response.status === 200) {
        that.setState({
          SFQData1:response.data.data.workstation_data.modbus,
          SFQAllData1:response.data.data
        });
      }
    });
    request(`/workstations/388445435469152256`, {
      method: 'GET',
    }).then(response => {
      if (response.status === 200) {
        that.setState({
          SFQData2:response.data.data.workstation_data.sensor,
          SFQAllData2:response.data.data
        });
      }
    });
  };
  changeCustomH = () => {
    this.setState({
      homeWidth: document.querySelector('.homePage').offsetWidth - 30,
    });
  };
  resize = () => {
    this.changeCustomH();
    this.changeTableY();
    this.resizeChart();
  };
  changeTableY = () => {
    this.setState({
      tableY: 500,
    });
  };
  resizeChart = () => {
    this.setState({
      IsFull: this.IsFull(),
    });
  };
  scroll = (e) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'dashboard/changeScroll',
      payload: {
        x: e.target.scrollLeft,
        y: e.target.scrollTop,
      },
    });
  };

  componentWillUnmount() {
    const table = document.querySelector('.homePage');
    console.log('table', table);
    table.removeEventListener('scroll', debounce(this.scroll, 300));
    console.log('componentWillUnmount');
    window.removeEventListener('resize', this.resize);
    if (this.timer) {
      clearInterval(this.timer);
    }
    if (this.timer2) {
      clearInterval(this.timer2);
    }
  }

  componentWillReceiveProps = (nextProps) => {

  };


  // 判断是否全屏
  IsFull = () => {
    const fullscreenElement = document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement;
    const fullscreenEnabled = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled;
    if (fullscreenElement == null) {
      return false;
    }
    return true;

  };
  getMapOption = () => {
    const {
      dashboard: { pressData,WaterworksData },
    } = this.props;
    let waterStationData=[
      {
        name:'塔尔郎水厂',
        value:[89.06170232440421,43.051727282747606,WaterworksData.item4]
      },
      {
        name:'老城区水厂',
        value:[89.1777580614279,42.989398853358125,WaterworksData.item8]
      },
      {
        name:'示范区水厂',
        value:[89.15627001722893,43.010166270910275,WaterworksData.item10]
      },
    ]

    let geoCoordMap={};
    let data=[];
    let offlineIndex=[];
    let errorIndex=[]
    for(let i=0;i<pressData.length;i++){
      geoCoordMap[pressData[i].name] = [pressData[i].longitude, pressData[i].latitude];
      offlineIndex[i]=pressData[i].online_status;
      errorIndex[i]=pressData[i].pressure_data.pressure_status;
      data.push({
        name:pressData[i].name,
        value:pressData[i].pressure_data.pressure,
        pressure_status:pressData[i].pressure_data.pressure_status
      })
    }
    // var geoCoordMap = {
    //
    //   '莲花县1': [89.18267638629149, 42.9517479985721],
    //   '莲花县2': [89.15941626971436, 42.94069035696609],
    //   '芦溪县1': [89.06567805048917, 42.88306815852215],
    //   '芦溪县2': [88.73981146493495, 42.774494933674646],
    //   '芦溪县3': [88.66257440486639, 42.613273294346186],
    //   '安源区2': [91.22088898193842, 41.93742472104631],
    //   '上栗县1': [90.71006800202954, 42.714250258341195],
    //   '萍乡市电瓷有限公司1': [89.49586679824571, 42.06316205419063],
    //   '莲花县3': [89.87010689530237, 41.72888099651965],
    // };
    var max = 480, min = 9; // todo
    var maxSize4Pin = 100, minSize4Pin = 20;

    var convertData = function(data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value),
          });
        }
      }
      return res;
    };
    echarts.registerMap('吐鲁番', tulufanGeo);
    let option = {
      backgroundColor: 'rgba(13,29,77,0.5)',
      animation:false,
      tooltip: {
        trigger: 'item',
        formatter: function(params) {
          if (typeof (params.value)[2] == 'undefined') {
            // return params.name + ' : ' + params.value;
            return '';
          } else {
            if(params.seriesName==='shuichang'){
              return params.name + ' 出水流量 : \n\n' + params.value[2]+'  m³/h';
            }else{
              return '';
            }

          }
        },
      },
      visualMap: {
        show: false,
        min: 0,
        max: 500,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true,
        seriesIndex: [1],
        inRange: {},
      },
      geo: {
        show: true,
        map: '吐鲁番',
        label: {
          position: 'top',
          normal: {
            show: true,

            fontSize: 12,
            formatter: function(params) {
              return params.name;
            },
            color: '#fff',
          },
          emphasis: { // 悬浮得样式
            show: true,
            textStyle: {
              color: '#fff',
            },
          },
        },
        roam: true,
        itemStyle: {
          normal: {
            areaColor: 'rgb(0,28,56)',
            borderColor: '#009cf8',
            borderWidth: 2,
            shadowColor: 'rgba(63, 218, 255, 0.5)',
            shadowBlur: 10,
          },
          emphasis: {
            areaColor: 'rgba(13,29,77,0.5)',
            borderWidth: 2,
            color: 'green',
            borderColor: '#8ae7ff',
            label: {
              show: false,
            },
          },
        },

      },
      series: [
        {
          name: 'shuichang',
          type: 'scatter',
          coordinateSystem: 'geo',
          data: waterStationData,
          symbol: 'pin', //气泡
          symbolSize: function(val) {
            if(val[2]!=='-'){
              return (parseInt(val[2]))/30;
            }else{
              return 30;
            }

          },
          label: {
            normal: {
              // formatter: '{b}',
              formatter: '{b} \n {@[2]} m³/h',
              position: 'bottom',
              color: '#fff',
              fontSize: 14,
              show: true
            },
            emphasis: {
              show: true
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(0,255,150)'
              // color: colors[colorIndex][n]
            }
          }
        },
        {
          type: 'map',
          map: '吐鲁番',
          geoIndex: 0,
          aspectScale: 1, //长宽比
          showLegendSymbol: false, // 存在legend时显示

          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
              textStyle: {
                color: '#fff',
              },
            },
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: '#031525',
              borderColor: '#FFFFFF',
            },
            emphasis: {
              areaColor: '#2B91B7',
            },
          },
          animation: false,
          data: data,
        },
        {
          name: 'light',
          type: 'effectScatter',
          coordinateSystem: 'geo',
          // data: convertData(data),
          data: convertData(filter(data, function(o) { return o.pressure_status===0; })),
          symbolSize: function(val) {
            // return val[2] / 20;
            return 15;
          },
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke',
          },
          hoverAnimation: true,
          label: {

            normal: {
              show:false,
              // formatter: '{b}',
              formatter: '{b} \n {@[2]} MPa',
              position: 'top',
              color:'#fff764',
              fontSize: 12,
            },
            emphasis: {
              show: true,
              fontSize: 16,
            },
          },
          itemStyle: {
            normal: {
              color: 'rgb(18,120,243)',
            },
          },
        },
        {
          name: 'Top 5',
          type: 'effectScatter',
          coordinateSystem: 'geo',
          data:convertData(filter(data, function(o) { return o.pressure_status!==0; })),
          symbolSize: function(val) {
            return 18;
          },
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke',
          },
          hoverAnimation: true,
          label: {
            normal: {
              formatter: '{b} \n {@[2]} MPa',
              position: 'bottom',
              show: true,
              fontSize: 12,
            },
          },
          itemStyle: {
            normal: {
              color: '#ff2c71',
              shadowBlur: 5,
              shadowColor: '#ff2c71',
            },
          },
          zlevel: 1,
        },
      ],
    };
    return option;
  };
  dynamic2 = () => {
    function array2obj(array, key) {
      var resObj = {};
      for (var i = 0; i < array.length; i++) {
        resObj[array[i][key]] = array[i];
      }
      return resObj;
    }
    if(!this.props.dashboard){
      return {}
    }
    const {
      dashboard: { MeterData },

    } = this.props;
    if(MeterData.vendor_analysis.length===0){
      return {}
    }
    let vendor_names=[];
    let total_counts=[]
    for(let i=0;i<MeterData.vendor_analysis.length;i++){
      vendor_names.push(MeterData.vendor_analysis[i].vendor_name)
      total_counts.push({
        name:MeterData.vendor_analysis[i].vendor_name,
        value:MeterData.vendor_analysis[i].total_count
      })
    }
    const objData = array2obj(MeterData, 'name');

    let option = {
      "backgroundColor": "rgba(28,28,28,0)",
      title: {
        show: false,
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)',
      },
      legend: {
        orient: 'vertical',
        left: '2%',
        data:vendor_names,
      },
      series: [
        {
          name: '水表个数',
          type: 'pie',
          radius: '60%',
          center: ['50%', '55%'],
          data: total_counts,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    };
    return option;
  };
  getOption = () => {
    if(!this.props.dashboard){
      return {}
    }
    const {
      dashboard: { RevenueData },
    } = this.props;
    let xData=[];
    let wechatData=[];
    let counterData=[];
    let totalData=[];
    for(let i=0;i<RevenueData.date_range_charge_analysis.length;i++){
      xData.push(RevenueData.date_range_charge_analysis[i].date)
      counterData.push(RevenueData.date_range_charge_analysis[i].counter_payment.amount)
      wechatData.push(RevenueData.date_range_charge_analysis[i].wechat_payment.amount)
      totalData.push((Number(RevenueData.date_range_charge_analysis[i].wechat_payment.amount)+Number(RevenueData.date_range_charge_analysis[i].counter_payment.amount)).toFixed(2))
    }

    let option = {
      'backgroundColor': 'rgba(28,28,28,0)',
      "tooltip": {
        "trigger": "axis",
        "axisPointer": {
          "type": "shadow",
          textStyle: {
            color: "#fff"
          }

        },
      },
      "grid": {
        top: '12%',
        left: '8%',
        right: '1%',
        bottom: '10%',
        textStyle: {
          color: "#fff"
        }
      },
      "legend": {
        right: '0%',
        top: '0',
        textStyle: {
          color: '#edf8ff',
        },
        "data": ['微信公众号缴费', '柜台缴费', '平均']
      },
      xAxis: {
        type: 'category',
        data: xData,
        splitLine:{
          show:false
        }

      },
      "yAxis": [{
        "type": "value",
          "axisLine": {
          lineStyle: {
            color: '#edfaff'
          }
        },
        name: '金额(远)',
        "axisTick": {
          "show": false
        },
        "axisLabel": {
          "interval": 0,

        },
        "splitArea": {
          "show": false
        },
        // splitLine:{
        //   show:false
        // }

      }],
      "series": [{
        "name": "微信公众号缴费",
        "type": "bar",
        "stack": "总量",
        "barMaxWidth": 35,
        "barGap": "10%",
        "itemStyle": {
          "normal": {
            "color": "#04BE02",
            "label": {
              "show": false,
              "textStyle": {
                "color": "#fff"
              },
              "position": "inside",
              formatter: function(p) {
                return p.value > 0 ? (p.value) : '';
              }
            }
          }
        },
        "data":wechatData
      },

        {
          "name": "柜台缴费",
          "type": "bar",
          "stack": "总量",
          "itemStyle": {
            "normal": {
              "color": "rgb(251,85,117)",
              "barBorderRadius": 0,
              "label": {
                "show": false,
                "position": "inside",
                formatter: function(p) {
                  return p.value > 0 ? (p.value) : '';
                }
              }
            }
          },
          "data":counterData
        }, {
          "name": "总数",
          "type": "line",
          symbolSize:5,
          symbol:'circle',
          "itemStyle": {
            "normal": {
              "color": "#f0db17",
              "barBorderRadius": 0,
              "label": {
                "show": true,
                "position": "top",
                formatter: function(p) {
                  // console.log('p',p)
                  return p.dataIndex%2 !== 0 ? (p.value) : '';
                }
              }
            }
          },
          "data":totalData
        },
      ]
    }
    return option;
  };
  getOption2 = () => {
    if(!this.props.dashboard){
      return {}
    }
    const {
      dashboard: { WaterworksHistoryData },

    } = this.props;
    if(WaterworksHistoryData.length===0){
      return {}
    }
    let color = [
      "#FB5575",
      "#0097ff",
      "#00CA69",
    ];
    const hexToRgba = (hex, opacity) => {
      let rgbaColor = "";
      let reg = /^#[\da-f]{6}$/i;
      if (reg.test(hex)) {
        rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
          "0x" + hex.slice(3, 5)
        )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
      }
      return rgbaColor;
    }

    let xdata = [];
    let item4Ydata = [];
    let item8Ydata = [];
    let item10Ydata = [];
    for (let i = 0; i < WaterworksHistoryData.length; i++) {
      xdata.push(WaterworksHistoryData[i].upload_time.slice(10))
      item4Ydata.push(WaterworksHistoryData[i].item4)
      item8Ydata.push(WaterworksHistoryData[i].item8)
      item10Ydata.push(WaterworksHistoryData[i].item10)
    }
    let option = {
      "backgroundColor": "rgba(28,28,28,0)",
      color:color,
      tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          type: 'shadow',        // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      legend: {
        right: '0%',
        top: '0',
        textStyle: {
          fontSize: 12,
          color: '#F1F1F3',
        },
        data: ['塔尔郎水厂','老水厂','示范区水厂'],
      },
      grid: {
        top: '12%',
        left: '2%',
        right: '1%',
        bottom: '3%',
        containLabel: true,
      },
      yAxis: {
        type: 'value',
        name: '出水流量(m³/h)',
        position: 'left',
        axisLabel: {
          textStyle: {
            color: "#ffffff"
          }
        },
      },
      xAxis: {
        type: 'category',
        data: xdata,
        splitLine:{
          show:false
        }
      },
      series: [
        {
          name: '塔尔郎水厂',
          type: 'line',
          large:true,
          data: item4Ydata,
          lineStyle: {
            normal: {
              color: color[0],
            }
          },
          symbol: 'circle',//数据交叉点样式
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [{
                  offset: 0,
                  color: hexToRgba(color[0], 0.7)
                },
                  {
                    offset: 1,
                    color: hexToRgba(color[0], 0.1)
                  }
                ],
                false
              ),
            }
          },
        },
        {
          name: '老水厂',
          type: 'line',
          large:true,
          data: item8Ydata,
          lineStyle: {
            normal: {
              color: color[1],
            }
          },
          symbol: 'circle',//数据交叉点样式
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [{
                  offset: 0,
                  color: hexToRgba(color[1], 0.7)
                },
                  {
                    offset: 1,
                    color: hexToRgba(color[1], 0.1)
                  }
                ],
                false
              ),
            }
          },
        },
        {
          name: '示范区水厂',
          type: 'line',
          large:true,
          data: item10Ydata,
          lineStyle: {
            normal: {
              color: color[2],
            }
          },
          symbol: 'circle',//数据交叉点样式
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [{
                  offset: 0,
                  color: hexToRgba(color[2], 0.7)
                },
                  {
                    offset: 1,
                    color: hexToRgba(color[2], 0.1)
                  }
                ],
                false
              ),
            }
          },
        },
      ],
    };
    return option;


  };
  getPressOption=()=>{
    // 绘制左侧面
    const CubeLeft = echarts.graphic.extendShape({
      shape: {
        x: 0,
        y: 0
      },
      buildPath: function(ctx, shape) {
        // 会canvas的应该都能看得懂，shape是从custom传入的
        const xAxisPoint = shape.xAxisPoint
        const c0 = [shape.x, shape.y]
        const c1 = [shape.x - 13, shape.y - 13]
        const c2 = [xAxisPoint[0] - 13, xAxisPoint[1] - 13]
        const c3 = [xAxisPoint[0], xAxisPoint[1]]
        ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
      }
    })
// 绘制右侧面
    const CubeRight = echarts.graphic.extendShape({
      shape: {
        x: 0,
        y: 0
      },
      buildPath: function(ctx, shape) {
        const xAxisPoint = shape.xAxisPoint
        const c1 = [shape.x, shape.y]
        const c2 = [xAxisPoint[0], xAxisPoint[1]]
        const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
        const c4 = [shape.x + 18, shape.y - 9]
        ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
      }
    })
// 绘制顶面
    const CubeTop = echarts.graphic.extendShape({
      shape: {
        x: 0,
        y: 0
      },
      buildPath: function(ctx, shape) {
        const c1 = [shape.x, shape.y]
        const c2 = [shape.x + 18, shape.y - 9]
        const c3 = [shape.x + 5, shape.y - 22]
        const c4 = [shape.x - 13, shape.y - 13]
        ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
      }
    })
// 注册三个面图形
    echarts.graphic.registerShape('CubeLeft', CubeLeft)
    echarts.graphic.registerShape('CubeRight', CubeRight)
    echarts.graphic.registerShape('CubeTop', CubeTop)
    const {
      dashboard: { pressData },
    } = this.props;
    let MAX=[];
    let names=[];
    let values=[];
    let offlineIndex=[];
    let errorIndex=[]
    for(let i=0;i<pressData.length;i++){
      MAX.push(1.05);
      names.push(pressData[i].name)
      values.push(pressData[i].pressure_data.pressure);
      offlineIndex[i]=pressData[i].online_status
      errorIndex[i]=pressData[i].pressure_data.pressure_status
    }
    const VALUE =values;
    let option = {
      'backgroundColor': 'rgba(28,28,28,0)',
      animation:false,
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: function(params, ticket, callback) {
          const item = params[1]
          return item.name + ' : ' + item.value +' MPa';
        }
      },
      "grid": {
        top: '0%',
        left: '0%',
        right: '0%',
        bottom: '0%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data:names,
        axisLine: {
          show: false,
          lineStyle: {
            color: 'white'
          }
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false,
          length: 9,
          alignWithLabel: true,
          lineStyle: {
            color: '#000'
          }
        },
        axisLabel: {

          interval: 0,
          textStyle: {
            fontSize: 12,
          },
          formatter: function(params) {
            var newParamsName = "";
            var paramsNameNumber = params.length;
            var provideNumber = 5; //一行显示几个字
            var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
            if (paramsNameNumber > provideNumber) {
              for (var p = 0; p < rowNumber; p++) {
                var tempStr = "";
                var start = p * provideNumber;
                var end = start + provideNumber;
                if (p == rowNumber - 1) {
                  tempStr = params.substring(start, paramsNameNumber);
                } else {
                  tempStr = params.substring(start, end) + "\n";
                }
                newParamsName += tempStr;
              }

            } else {
              newParamsName = params;
            }
            return newParamsName;
          },
        }
      },
      yAxis: {
        type: 'value',
        axisLine: {
          show: false,
          lineStyle: {
            color: 'white'
          }
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false,
          fontSize: 16
        },
        boundaryGap: ['0%', '20%']
      },
      series: [{
        type: 'custom',
        renderItem: function(params, api) {
          const location = api.coord([api.value(0), api.value(1)])
          return {
            type: 'group',
            children: [{
              type: 'CubeLeft',
              shape: {
                api,
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0])
              },
              style: {
                fill: 'rgba(47,102,192,.27)'
              }
            }, {
              type: 'CubeRight',
              shape: {
                api,
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0])
              },
              style: {
                fill: 'rgba(59,128,226,.27)'
              }
            }, {
              type: 'CubeTop',
              shape: {
                api,
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0])
              },
              style: {
                fill: 'rgba(72,156,221,.27)'
              }
            }]
          }
        },
        data: MAX
      }, {
        type: 'custom',
        renderItem: (params, api) => {
          const location = api.coord([api.value(0), api.value(1)]);
          var color = errorIndex[api.value(0)]!==0?new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgb(243,71,39)'
          },
            {
              offset: 1,
              color: 'rgb(255,28,20)'
            }
          ]):offlineIndex[api.value(0)]===-1 ? new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgb(169,169,169)'
          },
            {
              offset: 1,
              color:  'rgb(182,182,182)'
            }
          ]) : new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(67,102,243,1)'
          },
            {
              offset: 1,
              color: 'rgba(29,67,243,1)'
            }
          ])
          return {
            type: 'group',
            children: [{
              type: 'CubeLeft',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0])
              },
              style: {
                fill: color
              }
            }, {
              type: 'CubeRight',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0])
              },
              style: {
                fill: color
              }
            }, {
              type: 'CubeTop',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0])
              },
              style: {
                fill: color
              }
            }]
          }
        },
        data: VALUE
      }, {
        type: 'bar',
        label: {
          normal: {
            show: true,
            position: 'top',

            fontSize: 14,
            color: '#fff',
            offset: [2, -25]
          }
        },
        itemStyle: {
          color: 'transparent'
        },
        tooltip: {

        },
        data: values
      }]
    }
    return option
  }
  getShuichangOption=()=>{
    const {
      dashboard: { WaterworksData },

    } = this.props;
    //<div className={styles.content_item} style={{fontSize:'13px'}}>
    //                           <span>煤窑沟进水流量</span>
    //                           <span>{this.state.TELData1[0]?this.state.TELData1[0].parameters.instantaneous_flow:''} (m³/h)</span>
    //                         </div>
    //                         <div className={styles.content_item} style={{fontSize:'13px'}}>
    //                           <span>大河沿进水流量</span>
    //                           <span>{this.state.TELData0[0]?this.state.TELData0[0].parameters.instantaneous_flow:''} (m³/h)</span>
    //                         </div>


    // <div className={styles.content_item}>
    //                           <span>DN1000出水流量</span>
    //                           <span  >{this.state.LCQData3.parameters?this.state.LCQData3.parameters.instantaneous_flow:''} (m³/h)</span>
    //                         </div>
    //                         <div className={styles.content_item}>
    //                           <span>DN800出水流量</span>
    //                           <span  >{this.state.LCQData4.parameters?this.state.LCQData4.parameters.instantaneous_flow:''} (m³/h)</span>
    //                         </div>


    //  <div className={styles.content_item}>
    //                           <span>出水流量(老线)</span>
    //                           <span >{this.state.SFQData1[0]?this.state.SFQData1[0].parameters.instantaneous_flow:''} (m³/h)</span>
    //                         </div>
    //                         <div className={styles.content_item}>
    //                           <span>出水流量(复线)</span>
    //                           <span >{this.state.SFQData0.parameters?this.state.SFQData0.parameters.instantaneous_flow:''} (m³/h)</span>
    //                         </div>
    //                         <div className={styles.content_item}>
    //                           <span>出水流量(宋峰)</span>
    //                           <span >{this.state.SFQData3.parameters?this.state.SFQData3.parameters.instantaneous_flow:''} (m³/h)</span>
    //                         </div>
    var LCQData=(this.state.LCQData3.parameters&&this.state.LCQData4.parameters)?(Number(this.state.LCQData3.parameters.instantaneous_flow)+Number(this.state.LCQData4.parameters.instantaneous_flow)).toFixed(2):0;
    var TELData=(this.state.TELData1[0]&&this.state.TELData0[0])?(Number(this.state.TELData1[0].parameters.instantaneous_flow)+Number(this.state.TELData0[0].parameters.instantaneous_flow)).toFixed(2):0;
    var SFQData=(this.state.SFQData1[0]&&this.state.SFQData0.parameters&&this.state.SFQData3.parameters)?(Number(this.state.SFQData1[0].parameters.instantaneous_flow)+Number(this.state.SFQData0.parameters.instantaneous_flow)+Number(this.state.SFQData3.parameters.instantaneous_flow)).toFixed(2):0;
    var QQHData=this.state.QQHData.length>0?this.state.QQHData[1].parameters.instantaneous_flow:0;
    var xdata = [ '塔尔郎水厂进水','老城区水厂出水','示范区水厂出水','七泉湖水厂出水'];
    var data = [
      TELData,
      LCQData,
      SFQData,
      QQHData
    ];
    var maxArr = [1500, 1500, 1500, 1500];
    let option = {
      animation:false,
      backgroundColor: "rgba(5,39,58,0)", //背景色
      tooltip:{
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: function(params, ticket, callback) {
          // console.log('params',params)
          const item = params[0]
          return item.axisValue + ' : ' + item.value +' (m³/h)';
        }
      },
      grid: {
        left: "3%",
        right: "3%",
        bottom: "3%",
        top: "0%",
        containLabel: true
      },
      xAxis: {
        data: xdata,
        triggerEvent: true,
        axisTick: {
          show: false
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: 'rgba(255,255,255,.1)'
          }
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          show: true,
          interval: 0,
          fontSize: 12,
          textStyle: {
            color: "#fff"
          }
        }
      },
      yAxis: {
        triggerEvent: true,
        max:3000,
        nameTextStyle: {
          color: "rgb(95,109,119)",
          fontSize: 18
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: 'rgba(255,255,255,.1)'
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: 'rgba(255,255,255,.1)'
          }
        },
        axisLabel: {
          show: false,
          textStyle: {
            color: "rgb(148,159,167)",
            fontSize: 14
          }
        }
      },
      // color: ["#e54035"],
      series: [
        // {
        //   name: "hill",
        //   type: "bar",
        //   barWidth: '90%',
        //   symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
        //   itemStyle: {
        //     normal: {
        //       color: "rgba(11,47,68,.8)"
        //     }
        //   },
        //   data: maxArr,
        //   z: 10
        // },
        {
          name: "hill",
          barMinHeight: 10,
          type: "pictorialBar",
          barCategoryGap: '0%',
          // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
          symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
          itemStyle: {
            normal: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color:'#9A11FF'
                },
                  {
                    offset: 1,
                    color:'#0084ff'
                  }
                ],
                global: false //  缺省为  false
              }
            },
          },
          label: {
            normal: {
              show: true,
              position: "top",
              textStyle: {
                fontSize:14,
                color: '#0cb3fe',
                fontWeight: 'bolder',
              }
            }
          },
          data: data,
          z: 11
        }
      ]
    }
    return option
  }
  render() {
    let company_id=sessionStorage.getItem('company_id');

    const {
      dashboard: { pressData,MeterData, RevenueData,scrollData, pageLoaded, searchParams,WorkstationsData,WorkstationsData3,addWorkstationsData,WaterworksData,station },
      dispatch
    } = this.props;

    let percent = 0;
    // if (data.summary.cold_meter && data.summary.cold_meter.yesterday_consumption !== 0) {
    //   percent = (data.summary.cold_meter.today_consumption - data.summary.cold_meter.yesterday_consumption) / data.summary.cold_meter.yesterday_consumption * 100;
    // }
    let  pressErrorCount=0;
    let  pressWarmCount=0;
    for(let i=0;i<pressData.length;i++){
      if(pressData[i].online_status===-1){
        pressErrorCount++
      }
      if(pressData[i].pressure_data.pressure_status!==0){
        pressWarmCount++
      }
    }
    let  workstationWarmCount=0;
    let  workstationErrorCount=0;
    for(let i=0;i<addWorkstationsData.length;i++){
      if(addWorkstationsData[i].online_status===-1){
        workstationErrorCount++
      }
      if(addWorkstationsData[i].alarm===1){
        workstationWarmCount++
      }
    }

    const username= sessionStorage.getItem('username')
    let stationSrc='';
    if(station===1){
      stationSrc='https://www.thingjs.com/pp/830b176940bce1eb9883cc92'
    }else if(station===2){
      stationSrc='https://www.thingjs.com/pp/362829770582a39753fb459c'
    }else if(station===3){
      stationSrc='https://www.thingjs.com/pp/b75520fd7a6a61d3fe2438cb'
    }else if(station===4){
      stationSrc="https://www.thingjs.com/pp/fbdf51fd5e2677b86e85149f"
    }else if(station===5){
      stationSrc='https://www.thingjs.com/pp/2a8fef01e42b8ef9a500a506'
    }
    const form=this.props.form
    const getFieldDecorator=form.getFieldDecorator
    if(find(this.permissions, { name: 'homepage' })){
      return (
        <div className={`homePage ${styles.home}`}
             style={{ height: 'calc(100vh - 56px)', overflow: 'auto', padding: '0 15px' }}>
          <div className={styles.dashboard_top_box}>
            <Form style={{position:'absolute',left:'10px',top:'30px'}}  layout="inline" >
              <AreaMap labelColor={'#fff'} form={form} searchParams={searchParams} getFieldDecorator={getFieldDecorator}/>
              <FormItem><Button
                type="primary"
                icon='search'
                onClick={() => {
                  const { form } = this.props;
                  form.validateFields((err, fieldsValue) => {
                    if (err) return;
                    dispatch({
                      type: 'dashboard/fetch',
                      payload:{
                        ...fieldsValue,

                      }
                    });

                  });
                }}
              >
                查询
              </Button>
              </FormItem>
            </Form>
            <span style={{position:'absolute',left:'5px',top:'20px',color:'#fff',fontSize:'20px'}}>

            </span>
            <img className={styles.dashboard_top} src={dashboard_top2} alt=""/>

            <span className={styles.dashboard_top_time}>{this.state.time}</span>
          </div>
          <div style={{ marginTop: '10px' }}>
            <Row gutter={16}>
              <Col className="gutter-row" span={6}>
                <Row gutter={8}>
                  <Col className="gutter-row" span={12}>
                    <div className={styles.dashboard_top_item}>
                      <h3>已安装水表</h3>
                      <p>{MeterData.summary.meter_count} <span>个</span></p>
                      <div className={styles.dashboard_item_desc}>
                        <span  style={{color:'#ff2c71'}}>异常个数 : {MeterData.summary.meter_abnormal_count}</span>
                      </div>
                      <span className={styles.border_top}></span>
                      <span className={styles.border_right}></span>
                      <span className={styles.border_left}></span>
                    </div>
                  </Col>
                  <Col className="gutter-row" span={12}>
                    <div className={styles.dashboard_top_item}>
                      <h3>今日用水量</h3>
                      <p>{MeterData.summary.cold_meter&&MeterData.summary.cold_meter.today_consumption.toFixed(2)} <span>m³</span></p>
                      <div className={styles.dashboard_item_desc} title={`昨日用水量 : ${MeterData.summary.cold_meter&&MeterData.summary.cold_meter.yesterday_consumption.toFixed(2)}`}>
                        <span >昨日用水量 : {MeterData.summary.cold_meter&&MeterData.summary.cold_meter.yesterday_consumption.toFixed(2)}</span>
                      </div>
                      <span className={styles.border_top}></span>
                      <span className={styles.border_right}></span>
                      <span className={styles.border_left}></span>
                    </div>
                  </Col>
                  <Col className="gutter-row" span={12}>
                    <div className={styles.dashboard_top_item}>
                      <h3>已开户数</h3>
                      <p>{RevenueData.summary&&RevenueData.summary.open_account_count} <span>户</span></p>
                      <div className={styles.dashboard_item_desc}>
                        <span  style={{color:'#ff2c71'}}>欠费 : {RevenueData.summary&&RevenueData.summary.arrears_account_count}</span>
                      </div>
                      <span className={styles.border_top}></span>
                      <span className={styles.border_right}></span>
                      <span className={styles.border_left}></span>
                    </div>
                  </Col>
                  <Col className="gutter-row" span={12}>
                    <div className={styles.dashboard_top_item}>
                      <h3>今日营收总额</h3>
                      <p>{RevenueData.date_range_charge_analysis.length>0&&(Number(RevenueData.date_range_charge_analysis[RevenueData.date_range_charge_analysis.length-1].counter_payment.amount)+Number(RevenueData.date_range_charge_analysis[RevenueData.date_range_charge_analysis.length-1].wechat_payment.amount)).toFixed(2) || 0} <span>元</span></p>
                      <div className={styles.dashboard_item_desc} title={`柜台 : ${RevenueData.date_range_charge_analysis.length>0&&(RevenueData.date_range_charge_analysis[RevenueData.date_range_charge_analysis.length-1].counter_payment.amount)} 微信 : ${RevenueData.date_range_charge_analysis.length>0&&(RevenueData.date_range_charge_analysis[RevenueData.date_range_charge_analysis.length-1].wechat_payment.amount)}`}>
                        <span>柜台 : {RevenueData.date_range_charge_analysis.length>0&&(RevenueData.date_range_charge_analysis[RevenueData.date_range_charge_analysis.length-1].counter_payment.amount)}</span>
                        <span>微信 : {RevenueData.date_range_charge_analysis.length>0&&(RevenueData.date_range_charge_analysis[RevenueData.date_range_charge_analysis.length-1].wechat_payment.amount)}</span>
                      </div>
                      <span className={styles.border_top}></span>
                      <span className={styles.border_right}></span>
                      <span className={styles.border_left}></span>
                    </div>
                  </Col>
                </Row>
                <div className={styles.dashboard_top_item} style={{height:'auto',marginBottom:'0',padding:'0'}}>
                  <h3  style={{borderBottom:'1px solid rgba(42,126,248)',padding:'8px'}}>各水表厂水表数量</h3>
                  <ReactEcharts
                    option={this.dynamic2()}
                    style={{ height: '230px', width: '99%',paddingTop:'5px' }}
                    theme='my_theme'
                    //onChartReady={this.onChartReadyCallback}
                    //onEvents={EventsDict}
                  />
                  <span className={styles.border_top}></span>
                  <span className={styles.border_right}></span>
                  <span className={styles.border_left}></span>
                </div>
              </Col>
              <Col className="gutter-row" span={12}>
                <span className={styles.border_top} style={{left:'8px'}}></span>
                <div className={styles.map_box} style={{position:'relative',height: '532px',overflow:'hidden'}}>

                  <iframe src={stationSrc} style={{position:'absolute',top:'-50px',width:'100%',height:'100%',border:'none'}}></iframe>
                  <div style={{width:'100%',height:'50px',position:'absolute',bottom:'0',left:'0',fontSize:'16px',textAlign:'center',color:'#fff'}}>
                    <Row>
                      <Col span={5}><div onClick={()=>{this.props.dispatch({type:'dashboard/saveStation',payload:1})}}  style={{cursor:'pointer',height:'50px',lineHeight:'50px',background:station===1?'#4cb1f8':'#0a79c5'}}>塔尔郎水厂</div></Col>
                      <Col span={5}><div onClick={()=>{this.props.dispatch({type:'dashboard/saveStation',payload:2})}}  style={{cursor:'pointer',height:'50px',lineHeight:'50px',background:station===2?'#4cb1f8':'#0a79c5'}}>示范区水厂</div></Col>
                      <Col span={5}><div onClick={()=>{this.props.dispatch({type:'dashboard/saveStation',payload:3})}}  style={{cursor:'pointer',height:'50px',lineHeight:'50px',background:station===3?'#4cb1f8':'#0a79c5'}}>老城区水厂</div></Col>
                      <Col span={4}><div onClick={()=>{this.props.dispatch({type:'dashboard/saveStation',payload:4})}}  style={{cursor:'pointer',height:'50px',lineHeight:'50px',background:station===4?'#4cb1f8':'#0a79c5'}}>七泉湖水厂</div></Col>
                      <Col span={5}><div onClick={()=>{this.props.dispatch({type:'dashboard/saveStation',payload:5})}}  style={{cursor:'pointer',height:'50px',lineHeight:'50px',background:station===5?'#4cb1f8':'#0a79c5'}}>园艺场沉砂池</div></Col>
                    </Row>
                  </div>
                {/*  <div className={styles.map2}></div>
                  <div className={styles.map1}></div>
                  <div className={styles.map3}></div>*/}
                 {/* <ReactEcharts
                    option={this.getMapOption()}
                    style={{ height: '1100px', width: '200%',zIndex:'10' ,position:'absolute',left:'30%',top:'45%',transform:'translate(-50%,-50%)'}}
                    theme='my_theme'
                    //onChartReady={this.onChartReadyCallback}
                    // onEvents={ {
                    //   'georoam':(e)=>{
                    //     console.log('georoam')
                    //     console.log(e.zoom)
                    //     dispatch({
                    //       type: `dashboard/saveZoom`,
                    //       payload:e.zoom
                    //     });
                    //   },
                    // }}
                  />*/}
                </div>

              </Col>
              <Col className="gutter-row" span={6}>
                <Row gutter={8}>
                  <Col className="gutter-row" span={12}>
                    <div className={styles.dashboard_top_item}>
                      <h3>压力监测站点</h3>
                      <p>{pressData.length} <span>个</span></p>
                      <div className={styles.dashboard_item_desc}>
                        {
                          pressErrorCount>0&&
                          <span style={{color:'#ff2c71'}}>离线数 : {pressErrorCount}</span>
                        }
                        {
                          pressWarmCount>0&&
                          <span style={{color:'#ff2c71'}}>报警数 : {pressWarmCount}</span>
                        }
                      </div>
                      <span className={styles.border_top}></span>
                      <span className={styles.border_right}></span>
                      <span className={styles.border_left}></span>
                    </div>
                  </Col>
                  <Col className="gutter-row" span={12}>
                    <div className={styles.dashboard_top_item}>
                      <h3>水务监控站点</h3>
                      <p>{addWorkstationsData.length} <span>个</span></p>
                      <div className={styles.dashboard_item_desc} title={`报警数 : ${workstationWarmCount} 离线数 : ${workstationErrorCount}`}>
                        {
                          workstationWarmCount>0&&
                          <span  style={{color:'#ff2c71'}}>报警数 : {workstationWarmCount}</span>
                        }
                        {
                          workstationErrorCount>0&&
                          <span  style={{color:'#ff2c71'}}>离线数 : {workstationErrorCount}</span>
                        }

                      </div>
                      <span className={styles.border_top}></span>
                      <span className={styles.border_right}></span>
                      <span className={styles.border_left}></span>
                    </div>
                  </Col>
                  <Col className="gutter-row" span={12}>
                    <div className={styles.dashboard_top_item} style={{height:'80px'}}>
                      <h3>水厂监测站点</h3>
                      <p>4 <span>个</span></p>
                      <span className={styles.border_top}></span>
                      <span className={styles.border_right}></span>
                      <span className={styles.border_left}></span>
                    </div>
                  </Col>
                  <Col className="gutter-row" span={12}>
                    <div className={styles.dashboard_top_item} style={{height:'80px'}}>
                      <h3>已测量管网总长</h3>
                      <p>191796.11 <span>米</span></p>
                      <span className={styles.border_top}></span>
                      <span className={styles.border_right}></span>
                      <span className={styles.border_left}></span>
                    </div>
                  </Col>
                </Row>
                <div className={styles.dashboard_top_item} style={{height:'auto',marginBottom:'0',padding:'0'}}>
                  <h3  style={{padding:'8px'}}>水厂检测地点数据
                  <span style={{float:'right',fontSize:'14px'}}></span></h3>
                  <div style={{height:'260px'}} className={styles.shuichang_container}>
                    <div className={styles.shuichang_box}>
                      <div className={styles.title}><img style={{width:'16px',height:'16px',marginRight:'5px',position:'relative',top:'-2px'}} src={location_shuichang} alt=""/>老城区水厂</div>
                      <div className={styles.content}>
                        <div className={styles.content_item}>
                          <span>DN1000出水流量</span>
                          <span  >{this.state.LCQData3.parameters?this.state.LCQData3.parameters.instantaneous_flow:''} (m³/h)</span>
                        </div>
                        <div className={styles.content_item}>
                          <span>DN800出水流量</span>
                          <span  >{this.state.LCQData4.parameters?this.state.LCQData4.parameters.instantaneous_flow:''} (m³/h)</span>
                        </div>

                        <div className={styles.content_item}>
                          <span>1#清水池液位</span>
                          <span >{this.state.LCQData1[0]?this.state.LCQData1[0].parameters.value:''} (m)</span>
                        </div>
                        <div className={styles.content_item}>
                          <span>2#清水池液位</span>
                          <span >{this.state.LCQData2[0]?this.state.LCQData2[0].parameters.value:''} (m)</span>
                        </div>
                      </div>
                    </div>
                    <div className={styles.shuichang_box}>
                      <div className={styles.title}><img style={{width:'16px',height:'16px',marginRight:'5px',position:'relative',top:'-2px'}} src={location_shuichang} alt=""/>塔尔郎水厂</div>
                      <div className={styles.content}>
                        <div className={styles.content_item} style={{fontSize:'13px'}}>
                          <span>煤窑沟进水流量</span>
                          <span>{this.state.TELData1[0]?this.state.TELData1[0].parameters.instantaneous_flow:''} (m³/h)</span>
                        </div>
                        <div className={styles.content_item} style={{fontSize:'13px'}}>
                          <span>大河沿进水流量</span>
                          <span>{this.state.TELData0[0]?this.state.TELData0[0].parameters.instantaneous_flow:''} (m³/h)</span>
                        </div>
                        <div className={styles.content_item} style={{fontSize:'13px'}}>
                          <span>出水流量</span>
                          <span>{this.state.TELData2.parameters?this.state.TELData2.parameters.instantaneous_flow:''} (m³/h)</span>
                        </div>
                        <div className={styles.content_item} style={{fontSize:'13px'}}>
                          <span>1#5000方液位</span>
                          <span>{this.state.TELData3[0]?this.state.TELData3[0].parameters.value:''} (m)</span>
                        </div>
                      </div>
                    </div>

                    <div className={styles.shuichang_box}>
                      <div className={styles.title}><img style={{width:'16px',height:'16px',marginRight:'5px',position:'relative',top:'-2px'}} src={location_shuichang} alt=""/>示范区水厂</div>
                      <div className={styles.content}>
                        <div className={styles.content_item}>
                          <span>出水流量(老线)</span>
                          <span >{this.state.SFQData1[0]?this.state.SFQData1[0].parameters.instantaneous_flow:''} (m³/h)</span>
                        </div>
                        <div className={styles.content_item}>
                          <span>出水流量(复线)</span>
                          <span >{this.state.SFQData0.parameters?this.state.SFQData0.parameters.instantaneous_flow:''} (m³/h)</span>
                        </div>
                        <div className={styles.content_item}>
                          <span>出水流量(宋峰)</span>
                          <span >{this.state.SFQData3.parameters?this.state.SFQData3.parameters.instantaneous_flow:''} (m³/h)</span>
                        </div>
                        <div className={styles.content_item}>
                          <span>5000方液位</span>
                          <span >{this.state.SFQData2[0]?this.state.SFQData2[0].parameters.value:''} (m)</span>
                        </div>
                      </div>
                    </div>
                    <div className={styles.shuichang_box}>
                      <div className={styles.title}><img style={{width:'16px',height:'16px',marginRight:'5px',position:'relative',top:'-2px'}} src={location_shuichang} alt=""/>园艺场沉砂池</div>
                      <div className={styles.content}>
                        <div className={styles.content_item}>
                          <span>液位</span>
                          <span >{this.state.YYCData1[0]?this.state.YYCData1[0].parameters.value+2:''} (m)</span>
                        </div>
                        <div className={styles.content_item}>
                          <span>浊度</span>
                          <span >{this.state.YYCData2[0]?this.state.YYCData2[0].parameters.measure_value2:''} (NTU)</span>
                        </div>
                      </div>
                    </div>
                  </div>

                  <span className={styles.border_top}></span>
                  <span className={styles.border_right}></span>
                  <span className={styles.border_left}></span>
                </div>
              </Col>
            </Row>
            <Row style={{marginTop:'12px'}}  gutter={8}>
              <Col  span={7}>
                <div className={styles.dashboard_box}>
                  <h3>减压阀控制站点</h3>
                  <div  style={{ height: '280px', width: '100%',padding:'5px' }}>
                   <div className={`${styles.range} ${styles.range_header}`}>
                     <ul>
                       <li>
                         <div className="name" onClick={() => {
                         }
                         }>
                         </div>
                         <div className="positive_cumulative_flow">阀前压力状态</div>
                         <div className="positive_cumulative_flow">阀后压力状态</div>
                         <div className="positive_cumulative_flow">液位状态</div>
                       </li>
                     </ul>
                   </div>
                   <div className={styles.range}  style={{ height:'225px' }}>
                     <ul >
                       {
                         WorkstationsData.map((item, index) => {
                           // console.log((item.workstation_data.modbus[0]&&item.workstation_data.modbus[0].parameters.status==1)?'报警': '正常')
                           return <li key={index}>
                             <div className="name">
                  <span title={item.name}  style={{textDecoration:'auto',cursor:'auto'}}><img src={location_shuichang} alt="" style={{position:'relative',top:'-2px',width:'16px',height:'16px',marginRight:'4px'}}/>{item.name}</span></div>
                             <div className="positive_cumulative_flow">{(item.workstation_data.sensor.length>0&&item.workstation_data.sensor[0])&&<img title={(item.workstation_data.sensor[0]&&item.workstation_data.sensor[0].parameters.status==='1')?'报警': '正常'} src={item.workstation_data.sensor[0].parameters.status==='1'?baojing: dunpai} alt=""/>}{(item.workstation_data.sensor.length>0&&item.workstation_data.sensor[0])?item.workstation_data.sensor[0].parameters.value:'-'} MPa</div>
                             <div className="positive_cumulative_flow">{(item.workstation_data.sensor.length>0&&item.workstation_data.sensor[1])&&<img title={(item.workstation_data.sensor[1]&&item.workstation_data.sensor[1].parameters.status==='1')?'报警': '正常'} src={item.workstation_data.sensor[1].parameters.status==='1'?baojing: dunpai} alt=""/>}{(item.workstation_data.sensor.length>0&&item.workstation_data.sensor[1])?item.workstation_data.sensor[1].parameters.value:'-'} MPa</div>
                             <div className="positive_cumulative_flow">{(item.workstation_data.sensor.length>0&&item.workstation_data.sensor[2])&&<img title={(item.workstation_data.sensor[2]&&item.workstation_data.sensor[2].parameters.alarm=='1')?'报警': '正常'}  src={item.workstation_data.sensor[2].parameters.alarm=='1'?yewei_error: yewei} alt=""/>}{(item.workstation_data.sensor.length>0&&item.workstation_data.sensor[2])?item.workstation_data.sensor[2].parameters.value:'-'} m</div>

                           </li>;
                         })
                       }
                     </ul>
                   </div>
                 </div>
                </div>
              </Col>
              <Col  span={11}>
                <div className={styles.dashboard_box}>
                  <h3>管网压力传感器压力值</h3>
                  <ReactEcharts
                    option={this.getPressOption()}
                    style={{ height: '280px', width: '100%',padding:'5px' }}
                    theme='my_theme'
                    //onChartReady={this.onChartReadyCallback}
                    //onEvents={EventsDict}
                    onEvents={{
                      'click': (e)=>{
                        console.log('click',e)
                      },
                    }}
                  />
                </div>
              </Col>
              <Col  span={6}>
                <div className={styles.dashboard_box}>
                  <h3  style={{fontSize:'15px'}}>水厂进出水流量</h3>
                  <ReactEcharts
                    option={this.getShuichangOption()}
                    style={{ height: '280px', width: '100%',padding:'5px' }}
                    theme='my_theme'
                    onEvents={{
                      'click': (e)=>{
                        console.log('click',e)
                      },
                    }}
                    //onChartReady={this.onChartReadyCallback}
                    //onEvents={EventsDict}
                  />
                </div>
              </Col>
              <Col  span={12}>
                <div className={styles.dashboard_box}>
                  <h3>缴费金额</h3>
                  <ReactEcharts
                    option={this.getOption()}
                    style={{ height: '280px', width: '100%',padding:'5px' }}
                    theme='my_theme'
                    //onChartReady={this.onChartReadyCallback}
                    //onEvents={EventsDict}
                  />
                </div>
              </Col>
              <Col  span={12}>
               {/*  <div className={styles.dashboard_box}>
                  <h3>水厂今日出水量记录</h3>
                  <ReactEcharts
                    option={this.getOption2()}
                    style={{ height: '280px', width: '100%',padding:'5px' }}
                    theme='my_theme'
                    //onChartReady={this.onChartReadyCallback}
                    //onEvents={EventsDict}
                  />
                </div> */}
                <div className={styles.dashboard_box}>
                  <h3>水厂水质监测</h3>
                  <div  style={{ height: '280px', width: '100%',padding:'5px' }}>
                    <div className={`${styles.range} ${styles.range_header}`}>
                      <ul>
                        <li>
                          <div className="name" onClick={() => {
                          }
                          }>
                          </div>
                          <div className="positive_cumulative_flow">PH值</div>
                          <div className="positive_cumulative_flow">浊度</div>
                          <div className="positive_cumulative_flow">溶氧</div>
                          <div className="positive_cumulative_flow">余氯</div>
                          <div className="positive_cumulative_flow">电导率</div>
                        </li>
                      </ul>
                    </div>
                    <div className={styles.range}  style={{ height:'225px' }}>
                      <ul >
                        {/*{
                          WorkstationsData3.map((item, index) => {
                            let ph=''
                            let dz=''
                            let ry=''
                            let yl=''
                            let ddl=''
                            if(item.template===3){
                              let modbus=item.workstation_data.modbus
                              let config_data=item.hardware_configs
                              if(modbus.length>0){
                                if (config_data.modbus[0].channel1_type == 1) {
                                  ph= modbus[0].parameters.measure_value1 + ``;
                                } else if (config_data.modbus[0].channel2_type == 1) {
                                  ph= modbus[0].parameters.measure_value2 + ``;
                                } else if (config_data.modbus[0].channel3_type == 1) {
                                  ph= modbus[0].parameters.measure_value3 + ``;
                                } else if (config_data.modbus[0].channel4_type == 1) {
                                  ph= modbus[0].parameters.measure_value4 + ``;
                                } else {
                                }

                                if (config_data.modbus[0].channel1_type == 2) {
                                  dz= modbus[0].parameters.measure_value1 + ` NTU`;
                                } else if (config_data.modbus[0].channel2_type == 2) {
                                  dz= modbus[0].parameters.measure_value2 + ` NTU`;
                                } else if (config_data.modbus[0].channel3_type == 2) {
                                  dz= modbus[0].parameters.measure_value3 +  ` NTU`;
                                } else if (config_data.modbus[0].channel4_type == 2) {
                                  dz= modbus[0].parameters.measure_value4 + ` NTU`;
                                } else {
                                  dz= '';
                                }

                                if (config_data.modbus[0].channel1_type == 3) {
                                  ry= modbus[0].parameters.measure_value1 + ` ppm`;
                                } else if (config_data.modbus[0].channel2_type == 3) {
                                  ry= modbus[0].parameters.measure_value2 + ` ppm`;
                                } else if (config_data.modbus[0].channel3_type == 3) {
                                  ry= modbus[0].parameters.measure_value3 +  ` ppm`;
                                } else if (config_data.modbus[0].channel4_type == 3) {
                                  ry= modbus[0].parameters.measure_value4 + ` ppm`;
                                } else {
                                  ry= '';
                                }

                                if (config_data.modbus[0].channel1_type == 4) {
                                  ddl= modbus[0].parameters.measure_value1 + ` μS/CM`;
                                } else if (config_data.modbus[0].channel2_type == 4) {
                                  ddl= modbus[0].parameters.measure_value2 + ` μS/CM`;
                                } else if (config_data.modbus[0].channel3_type == 4) {
                                  ddl= modbus[0].parameters.measure_value3 +  ` μS/CM`;
                                } else if (config_data.modbus[0].channel4_type == 4) {
                                  ddl= modbus[0].parameters.measure_value4 + ` μS/CM`;
                                } else {
                                  ddl= '';
                                }

                                if (config_data.modbus[0].channel1_type == 5) {
                                  yl= modbus[0].parameters.measure_value1 + ` ppm`;
                                } else if (config_data.modbus[0].channel2_type == 5) {
                                  yl=  modbus[0].parameters.measure_value2 + ` ppm`;
                                } else if (config_data.modbus[0].channel3_type == 5) {
                                  yl=  modbus[0].parameters.measure_value3 +  ` ppm`;
                                } else if (config_data.modbus[0].channel4_type == 5) {
                                  yl=  modbus[0].parameters.measure_value4 + ` ppm`;
                                } else {
                                  yl=  '';
                                }

                              }else{}
                            }else{
                            }
                            return <li key={index}>
                              <div className="name">
                                <span title={item.name}  style={{textDecoration:'auto',cursor:'auto'}}><img src={location_shuichang} alt="" style={{position:'relative',top:'-2px',width:'16px',height:'16px',marginRight:'4px'}}/>{item.name}</span></div>
                              <div className="positive_cumulative_flow">{item.workstation_data.modbus.length>0&&ph}</div>
                              <div className="positive_cumulative_flow">{item.workstation_data.modbus.length>0&&dz}</div>
                              <div className="positive_cumulative_flow">{item.workstation_data.modbus.length>0&&ry}</div>
                              <div className="positive_cumulative_flow">{item.workstation_data.modbus.length>0&&yl}</div>
                              <div className="positive_cumulative_flow">{item.workstation_data.modbus.length>0&&ddl}</div>

                            </li>;
                          })
                        }*/}
                        {
                          WorkstationsData3.map((item, index) => {
                            let ph=''
                            let dz=''
                            let ry=''
                            let yl=''
                            let ddl=''
                            if(item.template===3){
                              let modbus=item.workstation_data.modbus
                              let config_data=item.hardware_configs
                              if(modbus.length>0){
                                if (config_data.modbus[0].channel1_type == 1) {
                                  ph= modbus[0].parameters.measure_value1 + ``;
                                } else if (config_data.modbus[0].channel2_type == 1) {
                                  ph= modbus[0].parameters.measure_value2 + ``;
                                } else if (config_data.modbus[0].channel3_type == 1) {
                                  ph= modbus[0].parameters.measure_value3 + ``;
                                } else if (config_data.modbus[0].channel4_type == 1) {
                                  ph= modbus[0].parameters.measure_value4 + ``;
                                } else {
                                }

                                if (config_data.modbus[0].channel1_type == 2) {
                                  dz= modbus[0].parameters.measure_value1 + ` NTU`;
                                } else if (config_data.modbus[0].channel2_type == 2) {
                                  dz= modbus[0].parameters.measure_value2 + ` NTU`;
                                } else if (config_data.modbus[0].channel3_type == 2) {
                                  dz= modbus[0].parameters.measure_value3 +  ` NTU`;
                                } else if (config_data.modbus[0].channel4_type == 2) {
                                  dz= modbus[0].parameters.measure_value4 + ` NTU`;
                                } else {
                                  dz= '';
                                }

                                if (config_data.modbus[0].channel1_type == 3) {
                                  ry= modbus[0].parameters.measure_value1 + ` ppm`;
                                } else if (config_data.modbus[0].channel2_type == 3) {
                                  ry= modbus[0].parameters.measure_value2 + ` ppm`;
                                } else if (config_data.modbus[0].channel3_type == 3) {
                                  ry= modbus[0].parameters.measure_value3 +  ` ppm`;
                                } else if (config_data.modbus[0].channel4_type == 3) {
                                  ry= modbus[0].parameters.measure_value4 + ` ppm`;
                                } else {
                                  ry= '';
                                }

                                if (config_data.modbus[0].channel1_type == 4) {
                                  ddl= modbus[0].parameters.measure_value1 + ` μS/CM`;
                                } else if (config_data.modbus[0].channel2_type == 4) {
                                  ddl= modbus[0].parameters.measure_value2 + ` μS/CM`;
                                } else if (config_data.modbus[0].channel3_type == 4) {
                                  ddl= modbus[0].parameters.measure_value3 +  ` μS/CM`;
                                } else if (config_data.modbus[0].channel4_type == 4) {
                                  ddl= modbus[0].parameters.measure_value4 + ` μS/CM`;
                                } else {
                                  ddl= '';
                                }

                                if (config_data.modbus[0].channel1_type == 5) {
                                  yl= modbus[0].parameters.measure_value1 + ` ppm`;
                                } else if (config_data.modbus[0].channel2_type == 5) {
                                  yl=  modbus[0].parameters.measure_value2 + ` ppm`;
                                } else if (config_data.modbus[0].channel3_type == 5) {
                                  yl=  modbus[0].parameters.measure_value3 +  ` ppm`;
                                } else if (config_data.modbus[0].channel4_type == 5) {
                                  yl=  modbus[0].parameters.measure_value4 + ` ppm`;
                                } else {
                                  yl=  '';
                                }

                              }else{}
                            }else{
                            }
                            return <li key={index}>
                              <div className="name">
                                <span title={item.name}  style={{textDecoration:'auto',cursor:'auto'}}><img src={location_shuichang} alt="" style={{position:'relative',top:'-2px',width:'16px',height:'16px',marginRight:'4px'}}/>{item.name}</span></div>
                           {/*   <div className="positive_cumulative_flow">{item.workstation_data.rtu.length>0&&ph}</div>
                              <div className="positive_cumulative_flow">{item.workstation_data.rtu.length>0&&dz}</div>
                              <div className="positive_cumulative_flow">{item.workstation_data.rtu.length>0&&ry}</div>
                              <div className="positive_cumulative_flow">{item.workstation_data.rtu.length>0&&yl}</div>
                              <div className="positive_cumulative_flow">{item.workstation_data.rtu.length>0&&ddl}</div>*/}
                              <div className="positive_cumulative_flow">{item.workstation_data.rtu&&item.workstation_data.rtu.parameters&&item.workstation_data.rtu.parameters.ph}</div>
                              <div className="positive_cumulative_flow">{item.workstation_data.rtu&&item.workstation_data.rtu.parameters&&item.workstation_data.rtu.parameters.turbidity+'(NUT)'}</div>
                              <div className="positive_cumulative_flow">{item.workstation_data.rtu&&item.workstation_data.rtu.parameters&&item.workstation_data.rtu.parameters.dissolved_oxygen+'(mg/L)'}</div>
                              <div className="positive_cumulative_flow">{item.workstation_data.rtu&&item.workstation_data.rtu.parameters&&item.workstation_data.rtu.parameters.residual_chlorine+'(mg/L)'}</div>
                              <div className="positive_cumulative_flow">{item.workstation_data.rtu&&item.workstation_data.rtu.parameters&&item.workstation_data.rtu.parameters.conductivity+'(us/cm)'}</div>

                            </li>;
                          })
                        }
                      </ul>
                    </div>
                  </div>
                </div>
              </Col>

            </Row>

          </div>
          <div className={styles.homeFullIcon}
               onClick={() => {
                 const element = document.querySelector('.homePage');
                 if (this.state.IsFull) {
                   if (document.exitFullscreen) {
                     document.exitFullscreen();
                   } else if (document.mozCancelFullScreen) {
                     document.mozCancelFullScreen();
                   } else if (document.webkitExitFullscreen) {
                     document.webkitExitFullscreen();
                   }
                 } else if (element.requestFullscreen) {
                   element.requestFullscreen();
                 } else if (element.msRequestFullscreen) {
                   element.msRequestFullscreen();
                 } else if (element.mozRequestFullScreen) {
                   element.mozRequestFullScreen();
                 } else if (element.webkitRequestFullscreen) {
                   element.webkitRequestFullscreen();
                 }
               }}
          >
            <Icon className={styles.homeFullIconContent} type={this.state.IsFull ? 'fullscreen-exit' : 'fullscreen'}/>
          </div>
          <BackTop target={() => {
            return document.querySelector('.homePage');
          }}/>
        </div>
      );
    }else{
      return <div className={'homePage'}  style={{display:'flex',fontSize:'30px', height:'100%', flexDirection: 'column',  justifyContent: "center",alignItems: "center"}}>
        <Wave></Wave>
        <h1 style={{color:'#067500'}}>{`欢迎使用清源水务远传系统`}</h1>
      </div>;
    }

  }
}

export default BasicList;
